<template>
  <div id="neon" class="flex flex-col bg-white">
    <div id="neon_matrix"></div>
<!--    <div className="info text-white text-sm text-center">row:{{ block_row_num }} column:{{ block_column_num }}</div>-->
  </div>
</template>

<script>
import * as d3 from "d3"

var Mock = require('mockjs')
export default {
  name: "NeonMatrix",
  data() {
    return {
      height: 154,
      width: 968,
      gap: 2,
      delay: 500,
      layout_matrix: [],
      now_index: 0,
      block_row_num: 0,
      block_column_num: 0,
      bg_color: '#FEF6E8',
      color: '#707070',
      isFlash: true,
      frame_interval: 5000,
      dataset: [],
      font_dict: {
        ' ': [
          [0, 0],
          [0, 0],
          [0, 0],
          [0, 0],
          [0, 0],
          [0, 0],
          [0, 0],
        ],
        ',': [
          [0, 0],
          [0, 0],
          [0, 0],
          [0, 0],
          [0, 0],
          [1, 0],
          [1, 0],
        ],
        '.': [
          [0, 0],
          [0, 0],
          [0, 0],
          [0, 0],
          [0, 0],
          [0, 0],
          [1, 0],
        ],
        '!': [
          [1, 0],
          [1, 0],
          [1, 0],
          [1, 0],
          [1, 0],
          [0, 0],
          [1, 0],
        ],
        '#': [
          [0, 1, 0, 1, 0, 0],
          [0, 1, 0, 1, 0, 0],
          [1, 1, 1, 1, 1, 0],
          [0, 1, 0, 1, 0, 0],
          [1, 1, 1, 1, 1, 0],
          [0, 1, 0, 1, 0, 0],
          [0, 1, 0, 1, 0, 0],
        ],
        '(': [
          [0, 0, 1, 1, 0],
          [0, 1, 0, 0, 0],
          [1, 0, 0, 0, 0],
          [1, 0, 0, 0, 0],
          [0, 1, 0, 0, 0],
          [0, 0, 1, 1, 0],
          [0, 0, 0, 0, 0],
        ],
        ')': [
          [1, 1, 0, 0, 0],
          [0, 0, 1, 0, 0],
          [0, 0, 0, 1, 0],
          [0, 0, 0, 1, 0],
          [0, 0, 1, 0, 0],
          [1, 1, 0, 0, 0],
          [0, 0, 0, 0, 0],
        ],
        '+': [
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [1, 1, 1, 1, 1, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
        ],
        '-': [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [1, 1, 1, 1, 1, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
        ],
        '/': [
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 1, 0, 0],
          [0, 0, 0, 1, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 1, 0, 0, 0, 0],
          [0, 1, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
        ],
        '0': [
          [0, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 1, 1, 0],
          [1, 0, 1, 0, 1, 0],
          [1, 1, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 0, 0],
        ],
        '1': [
          [0, 0, 1, 0, 0, 0],
          [0, 1, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [1, 1, 1, 1, 1, 0],
        ],
        '2': [
          [0, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 0, 1, 1, 0, 0],
          [0, 1, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 1, 1, 1, 1, 0],
        ],
        '3': [
          [0, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 0, 1, 1, 0, 0],
          [0, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 0, 0],
        ],
        '4': [
          [0, 0, 0, 1, 1, 0],
          [0, 0, 1, 0, 1, 0],
          [0, 1, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 1, 1, 1, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 0, 1, 0],
        ],
        '5': [
          [1, 1, 1, 1, 1, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 1, 1, 1, 0, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 0, 0],
        ],
        '6': [
          [0, 0, 1, 1, 0, 0],
          [0, 1, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 0, 0],
        ],
        '7': [
          [1, 1, 1, 1, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 1, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
        ],
        '8': [
          [0, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 0, 0],
        ],
        '9': [
          [0, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 1, 0, 0],
          [0, 1, 1, 0, 0, 0],
        ],
        ':': [
          [0, 0],
          [1, 0],
          [1, 0],
          [0, 0],
          [0, 0],
          [1, 0],
          [1, 0],
        ],
        '<': [
          [0, 0, 0, 1, 0],
          [0, 0, 1, 0, 0],
          [0, 1, 0, 0, 0],
          [1, 0, 0, 0, 0],
          [0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0],
          [0, 0, 0, 1, 0],
        ],
        '=': [
          [0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0],
          [1, 1, 1, 1, 0],
          [0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0],
          [1, 1, 1, 1, 0],
          [0, 0, 0, 0, 0],
        ],
        '>': [
          [1, 0, 0, 0, 0],
          [0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0],
          [0, 0, 0, 1, 0],
          [0, 0, 1, 0, 0],
          [0, 1, 0, 0, 0],
          [1, 0, 0, 0, 0],
        ],
        '?': [
          [0, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 1, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
        ],
        '@': [
          [0, 1, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 0, 1, 0],
          [1, 0, 1, 1, 0, 1, 0],
          [1, 0, 1, 1, 0, 1, 0],
          [1, 0, 1, 1, 1, 1, 0],
          [1, 0, 0, 0, 0, 0, 0],
          [0, 1, 1, 1, 1, 1, 0],
        ],
        'A': [
          [0, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 1, 1, 1, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
        ],
        'B': [
          [1, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 1, 1, 1, 0, 0],
        ],
        'C': [
          [0, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 0, 0],
        ],
        'D': [
          [1, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 1, 1, 1, 0, 0],
        ],
        'E': [
          [1, 1, 1, 1, 1, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 1, 1, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 1, 1, 1, 1, 0],
        ],
        'F': [
          [1, 1, 1, 1, 1, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 1, 1, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
        ],
        'G': [
          [0, 1, 1, 1, 1, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 1, 1, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 0, 0],
        ],
        'H': [
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 1, 1, 1, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
        ],
        'I': [
          [1, 1, 1, 0],
          [0, 1, 0, 0],
          [0, 1, 0, 0],
          [0, 1, 0, 0],
          [0, 1, 0, 0],
          [0, 1, 0, 0],
          [1, 1, 1, 0],
        ],
        'J': [
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 0, 0],
        ],
        'K': [
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 1, 0, 0],
          [1, 1, 1, 0, 0, 0],
          [1, 0, 0, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
        ],
        'L': [
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 1, 1, 1, 1, 0],
        ],
        'M': [
          [1, 0, 0, 0, 1, 0],
          [1, 1, 0, 1, 1, 0],
          [1, 0, 1, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
        ],
        'N': [
          [1, 0, 0, 0, 1, 0],
          [1, 1, 0, 0, 1, 0],
          [1, 0, 1, 0, 1, 0],
          [1, 0, 0, 1, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
        ],
        'O': [
          [0, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 0, 0],
        ],
        'P': [
          [1, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
        ],
        'Q': [
          [0, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 1, 0, 0],
          [0, 1, 1, 0, 1, 0],
        ],
        'R': [
          [1, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
        ],
        'S': [
          [0, 1, 1, 1, 1, 0],
          [1, 0, 0, 0, 0, 0],
          [0, 1, 1, 1, 0, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 0, 0],
        ],
        'T': [
          [1, 1, 1, 1, 1, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
        ],
        'U': [
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 0, 0],
        ],
        'V': [
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 0, 1, 0, 0],
          [0, 1, 0, 1, 0, 0],
          [0, 0, 1, 0, 0, 0],
        ],
        'W': [
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 1, 0, 1, 0],
          [1, 1, 0, 1, 1, 0],
          [1, 0, 0, 0, 1, 0],
        ],
        'X': [
          [1, 0, 0, 0, 1, 0],
          [0, 1, 0, 1, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 1, 0, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
        ],
        'Y': [
          [1, 0, 0, 0, 1, 0],
          [0, 1, 0, 1, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
        ],
        'Z': [
          [1, 1, 1, 1, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 1, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 1, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 1, 1, 1, 1, 0],
        ],
        '\\': [
          [1, 0, 0, 0, 0, 0],
          [0, 1, 0, 0, 0, 0],
          [0, 1, 0, 0, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 0, 0, 1, 0, 0],
          [0, 0, 0, 1, 0, 0],
          [0, 0, 0, 0, 1, 0],
        ],
        '_': [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 1, 1, 1, 1, 0],
        ],
        'a': [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 1, 1, 1, 0, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 1, 0],
        ],
        'b': [
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 1, 1, 0, 0],
          [1, 1, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 1, 1, 1, 0, 0],
        ],
        'c': [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 0, 0],
        ],
        'd': [
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 1, 1, 0, 1, 0],
          [1, 0, 0, 1, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 1, 0],
        ],
        'e': [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 1, 1, 1, 1, 0],
          [1, 0, 0, 0, 0, 0],
          [0, 1, 1, 1, 1, 0],
        ],
        'f': [
          [0, 0, 1, 1, 0],
          [0, 1, 0, 0, 0],
          [1, 1, 1, 1, 0],
          [0, 1, 0, 0, 0],
          [0, 1, 0, 0, 0],
          [0, 1, 0, 0, 0],
          [0, 1, 0, 0, 0],
        ],
        'g': [
          [0, 0, 0, 0, 0, 0],
          [0, 1, 1, 1, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [1, 1, 1, 1, 0, 0],
        ],
        'h': [
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 1, 1, 0, 0],
          [1, 1, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
        ],
        'i': [
          [1, 0],
          [0, 0],
          [1, 0],
          [1, 0],
          [1, 0],
          [1, 0],
          [1, 0],
        ],
        'j': [
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 0, 0],
        ],
        'k': [
          [1, 0, 0, 0, 0],
          [1, 0, 0, 0, 0],
          [1, 0, 0, 1, 0],
          [1, 0, 1, 0, 0],
          [1, 1, 0, 0, 0],
          [1, 0, 1, 0, 0],
          [1, 0, 0, 1, 0],
        ],
        'l': [
          [1, 0, 0],
          [1, 0, 0],
          [1, 0, 0],
          [1, 0, 0],
          [1, 0, 0],
          [1, 0, 0],
          [0, 1, 0],
        ],
        'm': [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [1, 1, 0, 1, 0, 0],
          [1, 0, 1, 0, 1, 0],
          [1, 0, 1, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
        ],
        'n': [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [1, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
        ],
        'o': [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 0, 0],
        ],
        'p': [
          [0, 0, 0, 0, 0, 0],
          [1, 0, 1, 1, 0, 0],
          [1, 1, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 1, 1, 1, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
        ],
        'q': [
          [0, 0, 0, 0, 0, 0],
          [0, 1, 1, 0, 1, 0],
          [1, 0, 0, 1, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [0, 0, 0, 0, 1, 0],
        ],
        'r': [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [1, 0, 1, 1, 0, 0],
          [1, 1, 0, 0, 1, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 0, 0],
        ],
        's': [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 1, 1, 1, 1, 0],
          [1, 0, 0, 0, 0, 0],
          [0, 1, 1, 1, 0, 0],
          [0, 0, 0, 0, 1, 0],
          [1, 1, 1, 1, 0, 0],
        ],
        't': [
          [0, 1, 0, 0],
          [1, 1, 1, 0],
          [0, 1, 0, 0],
          [0, 1, 0, 0],
          [0, 1, 0, 0],
          [0, 1, 0, 0],
          [0, 0, 1, 0],
        ],
        'u': [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 1, 0],
        ],
        'v': [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 0, 1, 0, 0],
          [0, 0, 1, 0, 0, 0],
        ],
        'w': [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 1, 0, 1, 0],
          [1, 0, 1, 0, 1, 0],
          [0, 1, 1, 1, 1, 0],
        ],
        'x': [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 0, 1, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 1, 0, 1, 0, 0],
          [1, 0, 0, 0, 1, 0],
        ],
        'y': [
          [0, 0, 0, 0, 0, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [1, 0, 0, 0, 1, 0],
          [0, 1, 1, 1, 1, 0],
          [0, 0, 0, 0, 1, 0],
          [1, 1, 1, 1, 0, 0],
        ],
        'z': [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [1, 1, 1, 1, 1, 0],
          [0, 0, 0, 1, 0, 0],
          [0, 0, 1, 0, 0, 0],
          [0, 1, 0, 0, 0, 0],
          [1, 1, 1, 1, 1, 0],
        ],
        '←': [
          [0, 0, 0, 1, 0, 0, 0, 0],
          [0, 0, 1, 0, 0, 0, 0, 0],
          [0, 1, 0, 0, 0, 0, 0, 0],
          [1, 1, 1, 1, 1, 1, 1, 0],
          [0, 1, 0, 0, 0, 0, 0, 0],
          [0, 0, 1, 0, 0, 0, 0, 0],
          [0, 0, 0, 1, 0, 0, 0, 0],
        ],
        '↑': [
          [0, 0, 0, 1, 0, 0, 0, 0],
          [0, 0, 1, 1, 1, 0, 0, 0],
          [0, 1, 0, 1, 0, 1, 0, 0],
          [1, 0, 0, 1, 0, 0, 1, 0],
          [0, 0, 0, 1, 0, 0, 0, 0],
          [0, 0, 0, 1, 0, 0, 0, 0],
          [0, 0, 0, 1, 0, 0, 0, 0],
        ],
        '→': [
          [0, 0, 0, 1, 0, 0, 0, 0],
          [0, 0, 0, 0, 1, 0, 0, 0],
          [0, 0, 0, 0, 0, 1, 0, 0],
          [1, 1, 1, 1, 1, 1, 1, 0],
          [0, 0, 0, 0, 0, 1, 0, 0],
          [0, 0, 0, 0, 1, 0, 0, 0],
          [0, 0, 0, 1, 0, 0, 0, 0],
        ],
        '↓': [
          [0, 0, 0, 1, 0, 0, 0, 0],
          [0, 0, 1, 1, 1, 0, 0, 0],
          [0, 1, 0, 1, 0, 1, 0, 0],
          [1, 0, 0, 1, 0, 0, 1, 0],
          [0, 0, 0, 1, 0, 0, 0, 0],
          [0, 0, 0, 1, 0, 0, 0, 0],
          [0, 0, 0, 1, 0, 0, 0, 0],
        ],
      },
    }
  },
  props: ['text'],
  methods: {
    convertText(text) {
      if (this.$data.dataset.length == 0) {
        for (let i = 0; i < this.$data.font_dict[0].length; i++) {
          this.$data.dataset.push([])
        }
      }
      text.split('').forEach((item) => {
        this.mergeMatrix(this.$data.dataset, this.$data.font_dict[item] != null ? this.$data.font_dict[item] : this.$data.font_dict['?'])
      })

    },
    mergeMatrix: function (original, append) {
      for (let i = 0; i < original.length; i++) {
        for (let j = 0; j < append[i].length; j++) {
          original[i].push(append[i][j])
        }
      }
    },
    initMatrix: function (event) {
      let layout = d3.select('#neon_matrix').insert('svg').attr('height', this.$data.height).attr('width', this.$data.width)
      layout.insert('rect').attr('width','100%').attr('height','100%').attr('fill',this.bg_color)
      let layout_matrix = []
      this.$data.block_row_num = this.$data.dataset.length
      this.$data.block_column_num = this.$data.dataset[0].length
      let avg_height = Number.parseInt(this.$data.height / this.$data.block_row_num)
      let avg_width = Number.parseInt(this.$data.width / this.$data.block_column_num)
      let rect_length_max = avg_height > avg_width ? avg_width : avg_height
      let rect_length = rect_length_max - this.$data.gap
      for (let i = 0; i < this.$data.block_row_num; i++) {
        let matrix_column = []
        for (let j = 0; j < this.$data.block_column_num; j++) {
          matrix_column.push(this.initPattern(layout, j, i, rect_length))
        }
        layout_matrix.push(matrix_column)
      }
      this.$data.layout_matrix = layout_matrix
    },
    initPattern: function (layout, column, row, rect_length) {
      return layout.insert('rect').attr('height', rect_length).attr('width', rect_length)
          .attr('y', row * (rect_length + this.$data.gap)).attr('x', column * (rect_length + this.$data.gap))
          .attr('rx', '0').attr('fill', this.$data.bg_color)
    },
    loadFrame: function () {
      let isFlash = this.$data.isFlash
      this.clearFrame(isFlash)
      // this.addIndex()
      for (let i = 0; i < this.$data.block_row_num; i++) {
        for (let j = 0; j < this.$data.block_column_num; j++) {
          if (this.$data.dataset[i][j] == 1) {
            if (isFlash) this.$data.layout_matrix[i][j].transition().delay(Mock.Random.integer(0, this.$data.delay)).attr('fill', this.$data.color)
            else this.$data.layout_matrix[i][j].attr('fill', this.$data.color)
          }
        }
      }
    },
    refurbishFrame: function () {
      this.addIndex()
      this.$data.dataset = []
      this.convertText(this.text[this.$data.now_index])
      this.clearFrame()
      this.loadFrame()
    },
    clearFrame: function () {
      for (let i = 0; i < this.$data.block_row_num; i++) {
        for (let j = 0; j < this.$data.block_column_num; j++) {
          if (this.$data.isFlash) this.$data.layout_matrix[i][j].transition().delay(Mock.Random.integer(0, this.$data.delay)).attr('fill', this.$data.bg_color)
          else this.$data.layout_matrix[i][j].attr('fill', this.$data.bg_color)
        }
      }
    },
    addIndex: function () {
      this.$data.now_index = this.$data.now_index == this.text.length - 1 ? 0 : this.$data.now_index + 1
    },

  },
  mounted() {
    this.convertText(this.text[0])
    this.initMatrix()
    this.loadFrame()
    setInterval(this.refurbishFrame, this.$data.frame_interval)
  }
}
</script>

<style scoped>
</style>
